<template>
  <view class="board" @tap="OpenCin">
    <view class="rug"></view>
    <view class="broadcast">
      <view v-if="today.monthData.residue>0" class="warehouse" :style="{width:100*(today.monthData.residue/(today.monthData.residue+today.monthData.receipts+Math.abs(today.monthData.accumulate)+today.monthData.cost))+'%',borderRadius:`${today.monthData.receipts<=0&&today.monthData.cost<=0&&today.monthData.accumulate===0?'750rpx 750rpx 750rpx 750rpx':'750rpx 0 0 750rpx'}`}">{{ today.monthData.residue }}</view>
      <view v-if="today.monthData.receipts>0" class="save" :style="{width:100*(today.monthData.receipts/(today.monthData.residue+today.monthData.receipts+Math.abs(today.monthData.accumulate)+today.monthData.cost))+'%',borderRadius:`${today.monthData.residue<=0?'750rpx':'0'} ${today.monthData.cost<=0&&today.monthData.accumulate===0?'750rpx':'0'} ${today.monthData.cost<=0&&today.monthData.accumulate===0?'750rpx':'0'} ${today.monthData.residue<=0?'750rpx':'0'}`}">{{ today.monthData.receipts }}</view>
      <view v-if="today.monthData.accumulate!==0" class="accumulate" :style="{width:100*(Math.abs(today.monthData.accumulate)/(today.monthData.residue+today.monthData.receipts+Math.abs(today.monthData.accumulate)+today.monthData.cost))+'%',borderRadius:`${today.monthData.residue<=0&&today.monthData.receipts<=0?'750rpx':'0'} ${today.monthData.cost<=0?'750rpx':'0'} ${today.monthData.cost<=0?'750rpx':'0'} ${today.monthData.residue<=0&&today.monthData.receipts<=0?'750rpx':'0'}`}">{{ today.monthData.accumulate }}</view>
      <view v-if="today.monthData.cost>0" class="leave" :style="{borderRadius:`${today.monthData.residue<=0&&today.monthData.receipts<=0?'750rpx 750rpx 750rpx 750rpx':'0 750rpx 750rpx 0'}`,width:100*(today.monthData.cost/(today.monthData.residue+today.monthData.receipts+Math.abs(today.monthData.accumulate)+today.monthData.cost))+'%'}">{{today.monthData.cost}}</view>
    </view>
    <view
      class="big-price"
      :style="{
        color: `${today.dayData.residue < 0 ? 'rgb(141, 20, 20)' : 'rgb(228, 192, 12)'}`,
      }"
      >¥
      {{
        today.dayData.residue < 0
          ? -today.dayData.residue
          : today.dayData.residue
      }}
    </view>
    <view class="news">
      <view class="up" :style="{width:96*(today.dayData.receipts/today.dayData.limit)+'%'}">
        {{ today.dayData.receipts }}
  
      </view>
      <view class="down" :style="{width:96*(today.dayData.cost/today.dayData.limit)+'%'}">
        {{ today.dayData.cost  }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
import { useBillStore } from '@/stores/bill';

////变量区
const billStore = useBillStore();
let today = ref({
  residue: 0,
  year: 0,
  month: 0,
  day: 0,
  paymentList: [],
  monthData: {},
  dayData: {
    residue: 0,
  },
});

////函数区
onLoad(() => {
  console.log('cin Load');
});
onShow(() => {
  console.log('cin Show');
});
onHide(() => {
  console.log('cin Hide');
});

uni.$on('upDateBoard', function () {
  let temp = billStore.GetDayData(
    today.value.year,
    today.value.month,
    today.value.day,
  );
  today.value = temp;
});

uni.$on('dayData', function (data) {
  today.value = data;
  let temp = billStore.GetDayData(
    today.value.year,
    today.value.month,
    today.value.day,
  );
  today.value = temp;
});

function OpenCin() {
  uni.$emit('showCalByIndex', false);
  uni.$emit('openCin');
}
</script>

<style scoped>
.board {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 15px;
  display: flex;
  justify-content: center;
}
.rug{
  border-radius: 10px;
  border: 1rpx solid rgb(221,221,221);
  bottom: 4%;
  position: absolute;
  width: 95%;
  height: 38%;
  background-color: rgb(247,247,247);
}
.broadcast {
  position: absolute;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
  height: 8%;
  border-radius: 750rpx;
  color: white;
  display: flex;
  align-items: center;
  font-size: 22rpx;
  width: 90%;
  bottom: 0;
  margin-bottom: 4.5%;
}
.warehouse{
  padding-inline: 1%;
  display: flex;
  height: 100%;
  min-width: 10%;
  align-items: center;
  justify-content: center;
  background-color: rgb(228, 192, 12);
  transition: width ease 1s;
}
.save{
  padding-inline: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10%;
  height: 100%;
  background-color: rgb(100,185,113);
  transition: width ease 1s;
}
.accumulate{
  padding-inline: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 10%;
  height: 100%;
  background-color: rgb(155, 132.5, 96.5);
  transition: width ease 1s;
}
.leave{
  padding-inline: 1%;
  min-width: 10%;
  height: 100%;
  background-color: rgb(210, 80, 80);
  transition: width ease 1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news {
  padding-block: 1%;
  border-right: 5rpx solid rgb(118, 118, 118);
  position: absolute;
  color: rgb(118, 118, 118);
  bottom: 13%;
  height: 18%;
  width: 90%;
  margin-bottom: 2.5%;
  display: flex;
  justify-content: space-between;
  font-size: 30rpx;
  flex-direction: column;
}
.up{
  transition: width ease 1s;
  position: absolute;
  top:5%;
  right: 0;
  border-radius: 10rpx 0 0 10rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 40%;
  color: white;
  padding-left: 1%;
  padding-right: 3%;
  min-width: 50rpx;
  max-width: 613rpx;
  background-color: rgb(100,185,113);
  font-size: 22rpx;
}
.down{
  transition: width ease 1s;
  bottom:5%;
  position: absolute;
  right: 0;
  border-radius: 10rpx 0 0 10rpx;
  padding-left: 1%;
  padding-right: 3%;
  min-width: 50rpx;
  max-width: 613rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: white;
  height: 40%;
  background-color: rgb(210, 80, 80);
  font-size: 22rpx;
}
.big-price {
  position: absolute;
  top: 27%;
  transform: translate(0, -43%);
  max-width: 90%;
  height: 60%;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 150rpx;
  overflow: auto;
  white-space: nowrap;
}
</style>
